inline stylesの従来の課題をUtility Firstな考えで解消
Component コンポーネント codeのDOMに直接、inline styles インラインスタイルでスタイルを記述しながら、従来のinline styles インラインスタイルの課題を、CSS Frameworksにて、解消されてきた。
Designing with constraints.
inline styles インラインスタイルだとすべての値が独立していて、管理が難しいし、デザインの統一感が崩れがち
Utility class で作ると定義済みのデザイン・システムからスタイルを選択するので、上記の課題が解消される
結論: デザインの統一感やmaintainability 保守性が上がる
Responsive design.
インラインスタイルでメディアクエリを使用することはできない
ライブラリのレスポンシブユーティリティを使用することで、上記の課題解消
結論: Responsive レスポンシブ デザインの実装が可能
疑問
Container Queries CSSはどうなの？
Hover, focus, and other states.
inline styles インラインスタイルはhoverやfocusのような擬似クラス Pseudo-classesのスタイルを当てれない
ライブラリの状態バリアントにより、utility classで、上記の課題解消
結論: 擬似クラス Pseudo-classesにスタイル当てられる
疑問
他の擬似要素 Pseudo-elementsとかはどうなの？
これらの課題解消によって、inline styles インラインスタイル風に記述できるようになった
inline styles インラインスタイル風なメリットって？
CSS Architecture 設計手法からの一部開放
Globale Namespace ネームスペース汚染を考える必要がなくなり、naming 名付け 命名に対する工夫が減った。
specificity 詳細度 cssの扱いが楽